<template>
	<section>
		<div class="with-data">
			<div class="wallet">
				<navigator url="#">
					我的收益
				</navigator>
			</div>
			<div class="with-datatext">
				<div class="money">
					<p>
						<span>可提现金额</span>
					</p>
					<p>
						<strong>{{money}}</strong>元
					</p>
					<button class="with-btn" @click="setWithdrawalVisible(true)">我要提现</button>
				</div>
			</div>
			<image class="with-databg" src="../../static/withdrawal-bg.jpg" mode="widthFix">
		</div>
		<div class="with-subtitle">
			<span>收益明细</span> 仅显示截至昨天的结算数据
		</div>
		<ul class="with-list">
			<!-- <li>
				<p>收益时间</p>
				<p>收益来源</p>
				<p>收益对象</p>
				<p>收益佣金</p>
			</li> -->
			<li v-for="(item, index) in list" :key="`item${index}`">
				<p>{{item.created_at}}</p>
				<p>{{item.desc}}</p>
				<p>{{item.user_from_nickname}}</p>
				<p class="up" v-if="item.type < 4">+ {{item.get_price}}元</p>
				<p class="down" v-else>- {{item.get_price}}元</p>
			</li>
		</ul>
		<p class="with-padding"></p>
		<div class="with-footer">
			<p class="with-cumulative">
				已累计赚到{{totalMoney}}元
			</p>
			<button class="with-share" open-type="share">邀请好友一起赚钱</button>
		</div>
		<div class="with-form" :class="{active: popupVisible}" @click="setWithdrawalVisible(false)">
			<dl class="with-formedit" catchtap="stopWithdrawalClose">
				<dt>
					提现
				</dt>
				<dd>
					<div class="with-form-item">
						<label>提现账号：</label>
						<input type="text" value="" v-model="modelWithAccount"/>
					</div>
					<div class="with-form-item">
						<label>真实姓名：</label>
						<input type="text" value="" v-model="modelWithName" />
					</div>
					<div class="with-form-item">
						<label>提现金额：</label>
						<input type="text" value="" v-model="modelWithMoney"/>
					</div>
					<div class="with-form-select">
						<span 
						@click="selectWithNumber(index, item.value)" 
						v-for="(item, index) in withMoneyNumberList" 
						:key="item.value"
						:class="{active: withMoneyNumberIndex === index}">
							{{item.text}}
						</span>
					</div>
					<p class="with-form-tips">*现只支持支付宝提现，请输入真实姓名，否则可能提现失败</p>
					<button class="with-form-submit" v-show="canApply" @click="withDrawalAction">确定提现</button>
				</dd>
			</dl>
		</div>
	</section>
</template>

<script>
import config from '../../src/config/api.config.js';
import request from '../../src/utils/request.js';
import userCheck from '../../src/utils/user.js';
	export default {
		data() {
			return {
				page: 1, // 页码
				parentOpenid:'',//进入页面获取是否链接带有其他人的openid
				openid:'',
				isLoading: false, // 是否加载中
				loadOver: false, // 是否加载完成
				list: [], // 列表数据
				withMoneyNumberList: [
					{ text: '10元', value: 10 },
					{ text: '20元', value: 20 },
					{ text: '30元', value: 30 },
					{ text: '50元', value: 50 },
					{ text: '100元', value: 100 },
					{ text: '自定义', value: '' }
				],
				popupVisible: false, // 弹窗可视化
				money: '0', // 可提现金额
				totalMoney: '0', // 累计提现金额
				modelWithAccount: '', // 提现账号
				modelWithName: '', // 提现姓名
				modelWithMoney: '', // 提现金额
				withMoneyNumberIndex: -1, // 提现面额索引
				canApply:true,//是否可以提现
			}
		},
		onLoad(options){
			this.parentOpenid = options.parentOpenid != undefined ?options.parentOpenid:'';
			/**
			 * 统一处理页面获取用户openid操作
			 * @param {Object} openid
			 */
			userCheck.checkSession((openid) => {
				console.log('回调的openid:'+openid)
				this.openid = openid;
				console.log('页面上获取的openid：'+this.openid)
				// 加载数据
				this.getData();
			}, this.parentOpenid)
			
		},
		onReady() {
			// #ifdef MP-QQ
				qq.showShareMenu({
					showShareItems: ['qq', 'qzone', 'wechatFriends', 'wechatMoment']
				});
				qq.setEnableDebug({
					enableDebug: false
				});
			// #endif 
		},
		onReachBottom(r) {
			if(this.loadOver || this.isLoading) return;
			this.page ++;
			this.getData();
		},
		methods: {
			// 获取页面数据
			async getData() {
				this.isLoading = true;
				const r = await request({
					url: `${config.API}api/distributionList`,
					data: {
						openid: this.openid,
						page: this.page
					}
				});
				this.isLoading = false;
				if(r.error_code === 0) {
					this.canApply = true;
					this.money = r.data.money;
					this.totalMoney = r.data.total_money;
					this.list = [...this.list, ...r.data.list.data];
					if(r.data.list.current_page >= r.data.list.last_page) {
						this.loadOver = true;
					}
				}else{
					this.canApply = false;
				}
			},
			/**
			 * 设置弹窗可视化
			 * @param {boolean} visible 显示与隐藏
			 */
			setWithdrawalVisible(visible) {
				this.popupVisible = visible;
			},
			// 阻止点击事件冒泡关闭弹窗
			stopWithdrawalClose(event) {
				event.stopPropagation();
			},
			/**
			 * 选择提现面额
			 * @param {number} index 索引
			 * @param {number | string} value 面额
			 */
			selectWithNumber(index, value) {
				this.withMoneyNumberIndex = index;
				this.modelWithMoney = value;
			},
			// 提现
			async withDrawalAction() {
				if (this.modelWithAccount === '') return uni.showToast({
					title: '请填写提现账号',
					icon: 'none'
				});
				if (this.modelWithName === '') return uni.showToast({
					title: '请填写真实姓名',
					icon: 'none'
				});
				if (this.modelWithMoney === '') return uni.showToast({
					title: '请填写提现金额',
					icon: 'none'
				});
				if (this.modelWithMoney <= 0) return uni.showToast({
					title: '提现金额必须为大于0的数值',
					icon: 'none'
				});
				const r = await request({
					url: `${config.API}api/apply-money`,
					method: 'post',
					data: {
						openid: this.openid,
						money: this.modelWithMoney,
						apply_account: this.modelWithAccount,
						real_name: this.modelWithName
					}
				});
				if (r.error_code === 0) {
					this.modelWithAccount = '';
					this.modelWithName = '';
					this.modelWithMoney = '';
					this.withMoneyNumberIndex = -1;
					this.popupVisible = false;
					this.list = [];
					this.page = 1;
					this.isLoading = false;
					this.loadOver = false;
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					});
					this.getData();
					
				} else {
					uni.showToast({
						title: r.msg,
						icon: 'none'
					})
				}
			}
		},
		// 分享
		onShareAppMessage(r) {
			let _path = '/pages/wallet/withdrawal?parentOpenid='+this.openid;
			console.log(_path) 
			return {
				title: "心理测试、趣味测试",
				path: _path, //带上当前用户的openid，分销绑定关系
			}
		}
	}
</script>

<style lang="scss" scoped>
button {
	&:after {
		border: none;
	}
}
.with-data {
	position: relative;
	.wallet {
		position: absolute;
		display: block;
		background-color: rgba(255, 255, 255, .8);
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		font-size: 30rpx;
		color: #234fe3;
		top: 40rpx;
		padding: 10rpx 40rpx;
	}
	.with-datatext {
		position: absolute;
		top: 30rpx;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #fff;
		p {
			text-align: center;
			strong {
				font-size: 80rpx;
				font-weight: 400;
				display: inline-block;
				margin-right: 10rpx;
			}
		}
		.with-btn {
			font-size: 30rpx;
			color: #fff;
			border: 1px solid #fff;
			border-radius: 60rpx;
			background: none;
			padding: 0;
			width: 260rpx;
			height: 60rpx;
			line-height: 56rpx;
			margin: 30rpx auto 0 auto;
			
		}
	}
}
.with-databg {
	display: block;
	width: 100%;
}
.with-subtitle,
.with-cumulative{
	background-color: #e6e6e6;
	color: #999;
	font-size: 24rpx;
	padding: 30rpx;
	span {
		color: #000;
		margin-right: 20rpx;
	}
}
.with-list {
	padding: 20rpx 0;
	li {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		text-align: center;
		font-size: 26rpx;
		color: #666;
		p {
			flex: 1;
			&:first-child {
				text-align: left;
			}
			&:last-child {
				text-align: right;
			}
			&.up {
				color: red;
			}
			&.down {
				color: green;
			}
		}
	}
}
.with-cumulative {
	font-size: 28rpx;
	text-align: center;
	padding: 20rpx 0;
}
.with-share {
	padding: 0;
	border: 0;
	border-radius: 60rpx;
	color: #fff;
	font-size: 32rpx;
	background: linear-gradient(#5f89ff, #6475fd);
	margin: 40rpx;
}
.with-form {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .8);
	display: none;
	align-items: center;
	justify-content: center;
	&.active {
		display: flex;
	}
	.with-formedit {
		width: 84%;
		background-color: #fff;
		border-radius: 30rpx;
		overflow: hidden;
		dt {
			background-color: #5f89ff;
			font-size: 36rpx;
			color: #fff;
			padding: 30rpx 0;
			text-align: center;
		}
		dd {
			padding: 0 30rpx;
			.with-form-item {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				margin-top: 30rpx;
				label {
					display: block;
					width: 160rpx;
				}
				input {
					border: 1px solid #5f89ff;
					padding: 2rpx 10rpx;
					flex: 1;
					font-size: 24rpx;
					border-radius: 40rpx;
				}
			}
			.with-form-select {
				overflow: hidden;
				padding: 20rpx 0;
				span {
					float: left;
					margin-top: 24rpx;
					font-size: 30rpx;
					text-align: center;
					padding: 20rpx 0;
					background-color: #f0f0f0;
					color: #666;
					width: 28%;
					border-radius: 6rpx;
					box-sizing: border-box;
					border: 1px solid #f0f0f0;
					&.active {
						border: 1px solid #5f89ff;
					}
					&:nth-child(3n-1) {
						margin: 24rpx 8% 0 8%;
					}
				}
			}
			.with-form-tips {
				font-size: 20rpx;
				color: #aaa;
				padding: 20rpx 0;
			}
			.with-form-submit {
				padding: 0;
				border: 0;
				border-radius: 60rpx;
				color: #fff;
				font-size: 30rpx;
				background: linear-gradient(#5f89ff, #6475fd);
				margin: 20rpx 0 40rpx 0;
			}
		}
	}
}
.with-padding {
	height: 240rpx;
}
.with-footer {
	background-color: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
}
</style>
